<template>
	<div style="background-color: #36216c;height: 100vh;width: 100vw;">
	
		<div class="container" @click="trans()">
			<div id="box" ref="box"></div>
			<div id="yuan" ref="yuan">
				<img src="/static/xue.png" alt="">
			</div>
		</div>

		<view class="info">
			

			<view class="audio-wrapper">
				<view class="audio-number">{{nowtime}}</view>
				<slider class="audio-slider" :value="currentTime" min="0" :max="duration" @change="sliderChange"
					block-size="15" />
				<view class="audio-number">{{alltime}}</view>
			</view>
			<view class="audio-control-wrapper">
				<view @tap="updateWay()" v-if="playWay==2">
					<image class="iconbtn" src="../../static/image/icon/suijibofang.png" />
				</view>
				<view @tap="updateWay()" v-if="playWay==1">
					<image class="iconbtn" src="../../static/image/icon/xunhuanbofang.png" />
				</view>
				<view @tap="updateWay()" v-if="playWay==0">
					<image class="iconbtn" src="../../static/image/icon/danquxunhuan.png" />
				</view>
				<view @tap="last()">
					<image class="iconbtn" src="../../static/image/icon/shangyishou.png"></image>
				</view>
				<view @tap="play()" v-if="playState===1">
					<image class="iconbtn play" src="../../static/image/icon/kaishi-2.png"></image>
				</view>
				<view @tap="pause()" v-else>
					<image class="iconbtn play" src="../../static/image/icon/zanting-2.png"></image>
				</view>
				<view @tap="next()">
					<image class="iconbtn" src="../../static/image/icon/xiayishou.png"></image>
				</view>
				<view>
					<image class="iconbtn" src="../../static/image/icon/yinleliebiao.png"></image>
				</view>
			</view>

		</view>

	</div>
	<!-- <imtAudioVue /> -->
</template>

<script setup>
	import imtAudioVue from '../../components/imt-audio/imt-audio.vue';
	import {
		ref,
		computed,
		onMounted,
		defineExpose
	} from 'vue';
	// 获取元素引用
	const box = ref(null)
	const yuan = ref(null)

	let trans = () => {
		if (box.value && yuan.value) {
			box.value.style.transform = "translateX(-20px)";
			setTimeout(() => {
				box.value.style.transform = "translateX(0px)";
				yuan.value.style.transform = "translateX(0px)";
			}, 1000);
			yuan.value.style.transform = "translateX(20px)";
		}
	}
	defineExpose({
		trans
	});



	// // 音频管理器实例
	// let bgAudioMannager = null;

	// // 响应式数据
	// const playWay = ref(1);
	// const playState = ref(1);
	// const nowIndex = ref(0);
	// const duration = ref(0);
	// const currentTime = ref(0);
	// const songList = ref([{
	// 		"name": "走歌人",
	// 		"author": "暗杠",
	// 		"src": "http://music.163.com/song/media/outer/url?id=418990139.mp3",
	// 		"img": "http://p2.music.126.net/_UOTSqLC8qHRivyuUBC9OQ==/18200215974944920.jpg"
	// 	},
	// 	{
	// 		"name": "走歌人18",
	// 		"author": "暗杠",
	// 		"src": "http://music.163.com/song/media/outer/url?id=866018207.mp3",
	// 		"img": "http://p2.music.126.net/D9_qDt18yiHxVPr6CRGgLA==/109951163406952902.jpg"
	// 	},
	// 	{
	// 		"name": "走歌人原版无损伴奏",
	// 		"author": "暗杠",
	// 		"src": "http://music.163.com/song/media/outer/url?id=430685718.mp3",
	// 		"img": "http://p2.music.126.net/_UOTSqLC8qHRivyuUBC9OQ==/18200215974944920.jpg"
	// 	}
	// ]);

	// // 生命周期钩子 - 替代 onLoad
	// onMounted(() => {
	// 	// 微信小程序和App端
	// 	// #ifdef MP-WEIXIN || APP-PLUS
	// 	bgAudioMannager = uni.getBackgroundAudioManager();
	// 	// #endif

	// 	// H5端使用HTML5 Audio
	// 	// #ifdef H5
	// 	bgAudioMannager = new Audio();
	// 	// 模拟背景音频管理器的基本方法
	// 	bgAudioMannager.play = function() {
	// 		this.play()
	// 	};
	// 	bgAudioMannager.pause = function() {
	// 		this.pause()
	// 	};
	// 	bgAudioMannager.seek = function(time) {
	// 		this.currentTime = time
	// 	};
	// 	// #endif

	// 	// 其他端提示不支持
	// 	// #ifndef MP-WEIXIN && !APP-PLUS && !H5
	// 	uni.showToast({
	// 		title: '当前环境不支持音频播放',
	// 		icon: 'none'
	// 	});
	// 	// #endif
	// });

	// // 计算属性
	// const nowtime = computed(() => {
	// 	let s = currentTime.value;
	// 	let h = Math.floor(s / 60);
	// 	s = s % 60;
	// 	h = h.toString().padStart(2, '0');
	// 	s = s.toString().padStart(2, '0');
	// 	return `${h}:${s}`;
	// });

	// const alltime = computed(() => {
	// 	let s = duration.value;
	// 	let h = Math.floor(s / 60);
	// 	s = s % 60;
	// 	h = h.toString().padStart(2, '0');
	// 	s = s.toString().padStart(2, '0');
	// 	return `${h}:${s}`;
	// });

	// // 方法
	// const sliderChange = (e) => {
	// 	currentTime.value = e.detail.value;
	// 	bgAudioMannager?.seek(currentTime.value);
	// };

	// const bgAudioInnit = () => {
	// 	if (!bgAudioMannager) return;

	// 	bgAudioMannager.title = songList.value[nowIndex.value].name;
	// 	bgAudioMannager.singer = songList.value[nowIndex.value].author;
	// 	bgAudioMannager.coverImgUrl = songList.value[nowIndex.value].img;
	// 	bgAudioMannager.src = songList.value[nowIndex.value].src;

	// 	// 事件监听
	// 	bgAudioMannager.onPlay(() => {
	// 		playFunc();
	// 	});

	// 	bgAudioMannager.onPause(() => {
	// 		pauseFunc();
	// 	});

	// 	bgAudioMannager.onEnded(() => {
	// 		next();
	// 	});

	// 	bgAudioMannager.onTimeUpdate(() => {
	// 		currentTime.value = Math.floor(bgAudioMannager.currentTime);
	// 	});

	// 	bgAudioMannager.onPrev(() => {
	// 		last();
	// 	});

	// 	bgAudioMannager.onNext(() => {
	// 		next();
	// 	});

	// 	bgAudioMannager.onError(() => {
	// 		error();
	// 	});

	// 	bgAudioMannager.onWaiting(() => {
	// 		playState.value = 0;
	// 	});

	// 	bgAudioMannager.onCanplay(() => {
	// 		duration.value = Math.floor(bgAudioMannager.duration);
	// 	});
	// };

	// const error = () => {
	// 	playState.value = 0;
	// };

	// const play = () => {
	// 	if (!bgAudioMannager) return;

	// 	if (!bgAudioMannager.src) {
	// 		bgAudioInnit();
	// 	}
	// 	bgAudioMannager.play();
	// };

	// const pause = () => {
	// 	bgAudioMannager?.pause();
	// };

	// const playFunc = () => {
	// 	playState.value = 0;
	// };

	// const pauseFunc = () => {
	// 	playState.value = 1;
	// };

	// const last = () => {
	// 	// 随机播放
	// 	if (playWay.value === 2) {
	// 		nowIndex.value = Math.floor(Math.random() * songList.value.length);
	// 	}
	// 	// 顺序播放
	// 	else if (playWay.value === 1) {
	// 		nowIndex.value = nowIndex.value < 1 ?
	// 			songList.value.length - 1 :
	// 			nowIndex.value - 1;
	// 	}
	// 	// 单曲播放不做处理

	// 	bgAudioInnit();
	// };

	// const next = () => {
	// 	// 随机播放
	// 	if (playWay.value === 2) {
	// 		nowIndex.value = Math.floor(Math.random() * songList.value.length);
	// 	}
	// 	// 顺序播放
	// 	else if (playWay.value === 1) {
	// 		nowIndex.value = nowIndex.value >= songList.value.length - 1 ?
	// 			0 :
	// 			nowIndex.value + 1;
	// 	}
	// 	// 单曲播放不做处理

	// 	bgAudioInnit();
	// };

	// const updateWay = () => {
	// 	playWay.value = playWay.value === 2 ? 0 : playWay.value + 1;
	// };
</script>

<style scoped>
	.song-title {
		margin: 30upx;
	}

	.song-name {
		text-align: center;
		color: #FFFFFF;
		font-size: 35upx;
		margin-top: 30upx;

	}

	.song-author {
		text-align: center;
		color: #FFFFFF;
		font-size: 25upx;
	}

	.info {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: transparent;
		margin: 30upx;
		border-radius: 5px;
		width: 90vw;
	}

	.iconbtn {
		width: 60upx;
		height: 60upx;
		margin-left: 30upx;
		margin-right: 30upx;

	}

	.imt-audio {
		padding: 30upx;
		background: #fff;
		border-radius: 20upx;
	}

	.audio-wrapper {
		display: flex;
		align-items: center;
		margin: 30upx;
	}

	.audio-number {
		font-size: 24upx;
		line-height: 1;
		color: #FFFFFF;
	}

	.audio-slider {
		flex: 1;
		margin: 0 30upx;
	}

	.audio-control-wrapper {
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "iconfont" !important;
	}
	#box {
		height: 70%;
		width: 70%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url("/static/qian.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transition: transform 1s ease;
		z-index: 3;
		-webkit-mask-image: radial-gradient(circle at 100% 50%, transparent 0, transparent 10px, black 10px);
		mask-image: radial-gradient(circle at 100% 50%, transparent 0, transparent 10px, black 10px);
	}

	#yuan {
		width: 70%;
		height: 70%;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 42%;
		transition: transform 1s ease;
		z-index: 1;

	}


	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.container {
		height: 40vh;
		width: 80vw;
		margin: 10% auto;
		/* background: #ccc; */
		position: relative;
	}

	img {
		object-fit: cover;

	height: 28vh;
		border-radius: 50%;
		animation: rotate 15s linear infinite;
	}
</style>